/*
 * @Author: 杨健_Jonathan 
 * @Date: 2018-12-03 15:22:21 
 * @Last Modified by:   杨健_Jonathan 
 * @Last Modified time: 2018-12-04 01:22:21 
 */
#bCar {
    position: relative;
    margin-right: 20px;
}
#bCar em{
    position: absolute;
    font-size: 12px;
    right: -24px;
    top: 0;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: #f20d0d;
}
#bCar .concar{
    height: 68%;
    display: flex;
    padding: 10px;
}
#bCar .concar img{
    width: 100px;
    height: 56px;
    margin-right: 10px;
}
#bCar .carR li{
    font-size: 12px;
    line-height: 16px;
}
#bCar .carR li:last-child {
    margin: 8px 0 0;
    padding: 0;
    color: #f20d0d;
}
header {
    width: 100%;
    height: 534px;
    background: url('../../images/5baf3f1f0001e41b20000560.jpg') no-repeat center;
    background-size: cover;
}

.header {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}

.hd-top {
    display: flex;
    font-size: 12px;
    height: 72px;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, .5);
}

.hd-top a {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.hd-top a:hover {
    color: rgba(255, 255, 255, 1);
}

.hd-top .hd-right i {
    font-size: 26px;
}

.hd-right a {
    margin-left: 20px;
}

.hd-right a:first-child i {
    font-size: 18px;
}

.header h1 {
    font-size: 40px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(28, 31, 33, .6);
}

.header h2 {
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    margin-top: 8px;
}

.header .line {
    width: 640px;
    height: 1px;
    background-color: rgba(255, 255, 255, .2);
    margin: 16px auto 16px;
}

.header .info ul {
    display: flex;
    justify-content: center;
}

.header .info ul li {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    margin-right: 10px;
}

.header .price {
    margin: 16px 0;
}

.header .price span {
    font-size: 24px;
    font-weight: 700;
    color: #f20d0d;
}

.header .buy {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.header .buy a {
    display: block;
    background: #f20d0d;
    box-shadow: 8px 4px 8px 0 rgba(28, 31, 33, .2);
    font-size: 16px;
    font-weight: 200;
    color: #fff;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
}

.header .buy a:hover {
    background-color: #f04646;
}

.header .buy a:first-child {
    border-radius: 24px 0 0 24px;
}

.header .buy a:last-child {
    border-radius: 0 24px 24px 0;
    padding: 0 24px;
    position: relative;
}

.header .buy a:last-child em {
    position: absolute;
    left: 0;
    top: 16px;
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, .4);
}

.header .buy a:last-child i {
    font-size: 24px;
}

.header .huabei {
    margin-top: 32px;
}

.header .huabei span {
    display: inline-block;
    padding: 4px 16px;
    background-image: linear-gradient(-90deg, rgba(5, 152, 182, .6) 0, rgba(54, 0, 159, .6) 100%);
    font-size: 12px;
    color: #fff;
    border-radius: 16px;
}

.header .huabei span i {
    color: #1296db;
    margin-right: 5px;
    font-size: 14px;
}

/* 导航栏 */
nav {
    box-shadow: 0 8px 16px #ddd;
    padding: 16px 0 20px;
}

nav ul {
    display: flex;
    justify-content: center;
}

nav ul li {
    padding: 0 24px;
    color: #4d555d;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    position: relative;
}

nav ul li span {
    position: absolute;
    width: 20px;
    height: 2px;
    left: 50%;
    margin-left: -10px;
    bottom: -5px;
    background-color: #f04646;
    display: none;
}

nav ul li:first-child span {
    display: block;
}

nav ul li a:hover+span {
    display: block;
}


section {
    width: 1152px;
    height: 448px;
    color: #fff;
    margin: 40px auto;
    background: url('../../images/5baf3f300001e2f909000500.jpg') no-repeat center;
    background-size: cover;
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.section-bo {
    width: 96px;
    text-align: center;
}

.section-bo i {
    font-size: 80px;
    cursor: pointer;
    display: block;
    color: rgba(255, 255, 255, .7);
}

.section-bo i:hover {
    animation: bofan 2s linear infinite;
}

@keyframes bofan {
    0% {
        transform: rotateZ(0deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.section-test {
    width: 470px;
}

.section-test h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-line {
    width: 1px;
    height: 70%;
    background-color: #ddd;
}

.section-test p {
    line-height: 28px;
}

.section-a {
    width: 160px;
    text-align: center;
    cursor: pointer;
}

.section-a:hover .section-info {
    display: block;
}

.section-a img {
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

.section-a h3 {
    font-weight: 700;
    font-size: 20px;
    margin: 5px 0;
}

.section-info {
    width: 920px;
    height: 448px;
    border-radius: 12px 0 0 12px;
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 0;
    color: #4d555d;
    box-shadow: 0 4px 8px 0 #4d555d;
    text-align: justify;
    padding: 48px 60px 60px 64px;
    box-sizing: border-box;
    cursor: auto;
    display: none;
}

.section-info h2 {
    font-size: 32px;
    color: #f20d0d;
    font-weight: 700;
    line-height: 42px;
}

.section-info h3 {
    color: #07111b;
    line-height: 30px;
    margin-bottom: 24px;
}

.section-info p {
    font-size: 16px;
    color: #07111b;
    line-height: 32px;
}

.section-info span {
    position: absolute;
    line-height: 60px;
    font-size: 100px;
    right: -30px;
    top: 36%;
    color: #fff;
}

.w {
    width: 1152px;
    margin: 0 auto;
}

.info-a {
    width: 100%;
    height: 725px;
    background: url('../images/details/section1-bg.png') no-repeat center;
    background-size: cover;
}

.info-a-cont {
    padding: 60px 0;
}

.info-a-title {
    color: #fff;
    text-align: center;
}

#cont h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
}

#cont p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px;
}

.topFiexNav {
    width: 100%;
    display: flex;
    height: 60px;
    padding: 0 30px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.2);
    position: fixed;
    top: 0;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 9999;
}
.topFiexNav h1 {
    color: #07111b;
    font-size: 16px;
    font-weight: 700;
}
.topFiexNav ul {
    display: flex;
}
.topFiexNav ul li {
    margin: 0 20px;
}
.topFiexNav ul a {
    color: #4b555b;
    font-size: 16px;
    font-weight: 200;
}
.topFiexNav ul a:hover {
    color: #07111b;
}
.topFiexNav-buy {
    display: flex;
}
.topFiexNav-buy .price {
    font-size: 24px;
    font-weight: 200;
    margin-right: 24px;

    color:#f20d0d;
}
.topFiexNav-buy .buy {
    display: flex;
    justify-content: center;
}
.topFiexNav-buy .buy a {
    display: block;
    background: #f20d0d;
    box-shadow: 8px 4px 8px 0 rgba(28, 31, 33, .2);
    font-size: 16px;
    font-weight: 200;
    color: #fff;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
}
.topFiexNav-buy .buy a:hover {
    background-color: #f04646;
}
.topFiexNav-buy .buy a:last-child {
    position: relative;
}
.topFiexNav-buy.buy a:last-child em {
    position: absolute;
    left: 0;
    top: 12px;
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, .4);
}

.info-a-item {
    padding: 43px 47px 0;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px 0 #4d555d;
    margin-top: 50px;
}

.info-a-item ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.info-a-item ul li {
    width: 224px;
    height: 144px;
    margin-bottom: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-a-item img {
    width: 60px;
    height: 60px;
}

.info-a-item h3 {
    margin-top: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.info-b {
    width: 100%;
    height: 830px;
    background: url('../images/details/section2-bg.png') no-repeat center;
    background-size: cover;
}

.info-b-cont {
    text-align: center;
    padding-top: 64px;
}

.info-b-cont h2,
.info-c-cont h2 {
    color: #1cb492;
}

.info-b-cont img {
    height: 541px;
    margin-top: 64px;
    ;
}

.info-c {
    width: 100%;
    height: 624px;
    background: url('../images/details/section3-bg.png') no-repeat center;
    background-size: cover;
}

.info-c-cont h2 {
    text-align: center;
    padding: 60px 0;
}

.c-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-c-cont .secImg img {
    width: 440px;
    height: 294px;
    margin-top: 105px;
}

.item-fn img,
.item-tech img {
    width: 64px;
    height: 64px;
}

.item-fn {
    width: 244px;
}

.item-tech {
    width: 410px;
}

.c-item h3 {
    margin: 36px 0;
    font-weight: 700;
    font-size: 24px;
    color: #22303c;
}

.c-item ul {
    display: flex;
    flex-wrap: wrap;
}

.c-item li {
    margin: 0 10px 20px 0;
    padding: 7px 15px;
    background: #f8fafc;
    border: 1px solid #1cb492;
    border-radius: 28.5px;
    font-size: 16px;
    line-height: 22px;
    color: #1cb492;
}

.info-d {
    width: 100%;
    height: 400px;
    background: url('../images/details/section4-bg.png') no-repeat center;
    background-size: cover;
    color: #fff;
}
.info-e {
    background-color: #f3f5f6;
    height: 400px;
}
.info-f {
    height: 248px;
}
.info-d-cont,.info-e-cont,.info-f-cont {
    padding-top: 60px;
}
.info-d-cont h2 {
    text-align: center;
}
.info-e-cont h2 {
    text-align: center;
    color: #1cb492;
}
.info-d ul {
    display: flex;
    justify-content: space-between;
    margin-top: 48px;
}
.info-d li,.info-e-cont li,.info-f-cont li {
    /* width: 224px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.info-d li img {
    width: 60px;
    height: 60px;
}
.info-d li h3,.info-e-cont li h3 {
    margin-top: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}
.info-e-cont ul {
    display: flex;
    margin-top: 48px;
    justify-content: space-around;
}
.info-f-cont ul {
    display: flex;
    justify-content: space-around;
}
.info-e-cont ul i {
    font-size: 60px;
    color: #40b883;
}

.envir-box {
    background-color: #2b333b;
    padding-bottom: 72px;
}

.envir h3 {
    padding-top: 72px;
    padding-left: 24px;
    padding-bottom: 24px;
    border-bottom: 2px solid #555c62;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    margin-bottom: 24px;
}
.envir ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.envir ul li {
    width: 528px;
    height: 32px;
    margin-top: 15px;
}
.envir .detail-tag {
    background: #93999f;
    padding: 7px 18px 7px 12px;
    box-sizing: border-box;
    color: #07111b;
    line-height: 14px;
    position: relative;
}
.envir .detail-tag i {
    font-size: 72px;
    position: absolute;
    line-height: 30px;
    right: -22px;
    top: 0;
    color: #93999f;
}
.envir .detail {
    color: #fff;
    padding-left: 20px;
}
.question {
    background-color: #f3f5f7;
    padding: 90px 0 32px 0;
}
.question-input {
    text-align: center;
    margin-bottom: 32px;
}
.question-input .input-block {
    width: 656px;
}
.question-input .input-block:focus {
    border: 1px solid #f01414;
}

.input-block {
    font-size: 16px;
    height: 62px;
    line-height: 62px;
    color: #07111b;
    padding-left: 24px;
    border: 1px solid #d9dde1;
    outline: 0;
}
.question-input .btn {
    width: 120px;
    height: 64px;
    line-height: 64px;
    background-color: #f01404;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    margin-left: -5px;
    cursor: pointer;
}
.question-items {
    background-color: #fff;
    padding: 24px;
}
.question-items ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.question-items ul li {
    width: 42%;
    display: flex;
    margin: 20px 0 40px;
}
.question-items ul li i {
    font-size: 32px;
    color: #aaa;
    padding-right: 10px;
    cursor: pointer;
    box-sizing: border-box;
}
.question-items ul li i:hover {
    color: #f01404;
}
.question-items .q h3 {
    color: #1c1f21;
    cursor: pointer;
}
.question-items .q h3:hover {
    color: #f01404;
}
.question-items .q p {
    color: #4d555d;
}

/* 实战 */
.ad {
    background-color: #fff;
    padding: 40px 0;
}
.shizhan,.keqian {
    width: 1200px;
    margin: 0 auto;
}
.shizhan ul li {
    width: 276px;
    height: 316px;
    float: left;
    margin: 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
}
.shizhan ul li:hover {
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);
    transition: all .5s;
}
.shizhan ul li:first-child {
    margin-left: 0;
}
.shizhan h1,.keqian h1 {
    font-size: 16px;
    font-weight: 700;
    color: #07111b;
    line-height: 36px;
    margin-bottom: 20px;
}
.shizhan .s-top {
    width: 276px;
    height: 96px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.shizhan .s-top img {
    width: 276px;
}
.shizhan .s-cont {
    padding: 22px 24px 24px;
}
.shizhan .s-cont h3{
    font-size: 16px;
    line-height: 28px;
    color: #07111b;
    font-weight: 200;
    word-break: break-all;
    word-wrap: break-word;
}
.shizhan .s-cont p,.keqian p {
    font-size: 12px !important;
    color: #93999f;
    line-height: 24px;
    word-wrap: break-word;
}
.shizhan .s-cont p:last-child {
    margin-top: 0 !important;
}
.shizhan .s-cont p:nth-child(3) {
    margin-top: 26px !important;
}
.shizhan .s-cont p span{
    font-size: 16px;
    color: #f01414;
    line-height: 20px;
    font-weight: 200;
    float: right;
}
.shizhan .s-cont p i{
    font-size: 12px;
    color: #f90;
}
.keqian {
    margin-top: 24px;
}
.keqian ul li {
    width: 224px;
    height: 228px;
    float: left;
    margin: 16px 8px;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
}
.keqian ul li:first-child {
    margin-left: 0;
}
.keqian ul li:hover {
    box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);
    transition: all .5s;
}
.keqian .k-top{
    height: 48px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(270deg,rgba(0,185,90,.7),#00b95a);
}
.keqian .k-top span{
   padding-left: 20px;
   line-height: 48px;
   color: #fff;
}
.keqian .k-cont {
    padding: 10px 24px;
    
}
.keqian .k-cont p:nth-child(3) {
    position: absolute;
    bottom: 24px;
    left: 24px;
}

/* 侧边图标 */
.right-nav {
    position: fixed;
    padding: 0 16px;
    top: 55%;
    margin-top: -140px;
    right: 0;
    z-index: 899;
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(7,17,27,.1);
}
.right-nav li {
    width: 26px;
    padding: 16px 0;
    line-height: 22px;
    color: #b5b9bc;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #edf1f2;
}
.right-nav li:hover span{
    display: block;
}
.right-nav li:hover i{
    display: none;
}

.right-nav li span {
    font-size: 12px;
    color: #f20d0d;
    line-height: 12px;
    display: none;
}
.right-nav li i {
    font-size: 22px;
}
.qcrw,.qcrapp {
    width: 172px;
    height: 212px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 52px;
    display: none;
}
.qcrw {
    background: url('../../images/elevator.png') no-repeat;
    background-size: cover;
}
.qcrapp {
    background: url('../../images/elevator.png') no-repeat bottom;
    background-size: cover;
}
.right-nav li:nth-child(3):hover .qcrapp{
    display: block;
}
.right-nav li:nth-child(4):hover .qcrw{
    display: block;
}
#goTop{
    display: none;
}
.backShow{
    display: block !important;
}

/* 底部 */
.ft {
    background-color: #1c1f21;
}
.footer {
    width: 1088px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 36px 0;
    color: #ccc;
    justify-content: space-between;
}

.ft-left ul,
.ft-right ul {
    display: flex;
}

.footer li {
    margin-right: 20px;
    cursor: pointer;
}

.footer li:hover {
    color: #fff;
}

.footer li:last-child {
    margin-right: 0;
}

.ft-left ul {
    margin-bottom: 10px;
}

.ft-right ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ft-right i {
    font-size: 30px;
}